
//购物车功能
require(['./config'],()=>{
    //头尾互用
    require(['jquery'],()=>{
        $('header').load('/html/header.html',()=>{
            require(['header'],(modA)=>{
              modA()
            })
          })
        $('footer').load('/html/footer.html')
    })
    //购物车功能
    require(['jquery'],()=>{
        class Cart{
            constructor(){
                //从购物车里面取出数据
                this.list = JSON.parse(localStorage.getItem('cart')) || []
                //获取元素
                this.tbody = document.querySelector('tbody')
                this.cartTable = document.querySelector('.cartTable')
                this.totalNum = document.querySelector('.totalNum')
                this.money = document.querySelector('.money')
                this.selectAll = document.querySelector('.selectAll')
        
                this.init()
            }
            init(){
                this.render()
                this.bindHtml()
                this.total()
            }
            render(){
                //判断下购物车里面有没有数据
                if(!this.list.length){
                    this.tbody.innerHTML = `
                        <tr height="100">
                            <td colspan="6">
                                <img src="/img/5.jpg" alt="" class="img">
                                <h3>亲，你的购物车里面空空如也！赶紧去购物吧! <a href="/index.html">Go</a></h3>
                            </td>
                        </tr>
                    `
                }else{
                    this.tbody.innerHTML = ''
                    this.list.forEach(item=>{
                        this.tbody.innerHTML += `
                        <tr >
                            <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
                            <td>
                                <img src="${item.img_small_logo}" >
                                <span class="hide">${item.title}</span>
                            </td>
                            <td><span>${item.price}</span></td>
                            <td>
                                <span class="sub" data-id="${item.goods_id}">-</span>
                                <input type="text" value="${item.cart_number}" />
                                <span class="add" data-id="${item.goods_id}">+</span>
                            </td>
                            <td><span class="price">${item.price*item.cart_number}元</span></td>
                            <td><span class="del" data-id="${item.goods_id}">删除</span></td>
                        </tr>
                    `
                    })
                }
                //数据可持续化
                localStorage.setItem('cart', JSON.stringify(this.list))
            }
            //注意点：现在的开发方式由之前的操作DOM节点形式变为操作数据驱动页面方式
            bindHtml(){
                this.cartTable.onclick = (e)=>{
                    let target = e.target || e.srcElement
                    //全选功能
                    if(target.className == 'selectAll'){
                        let type = target.checked
                        this.list.forEach(item=>{
                            item.is_select = type
                        })
                        this.render()
                        this.total()
                    }
                    //单选功能
                    if(target.className == 'select'){
                        let id = target.dataset.id - 0
                        //找到数组里面对应的数据修改数据的状态
                        let goods = this.list.find(item=>{return item.goods_id == id})
                        goods.is_select = !goods.is_select
                        // let type=this.list.every(item=> item.is_select==true)
                        // this.selectAll.checked=type
                        this.render()
                        this.total()
                    }
                    //点击增加商品数量
                    if(target.className == 'add'){
                        let id = target.dataset.id - 0
                        let goods = this.list.find(item=>{return item.goods_id == id})
                        //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                        if(goods.cart_number==100){
                            alert('亲，只能购买这么多哦!')
                            return false
                        }
                        goods.cart_number++
                        require(['jquery'],()=>{
                            $('header').load('/html/header.html',()=>{
                                require(['header'],(modA)=>{
                                  modA()
                                })
                              })
                        })
                        this.render()
                        this.total()
                    }
                    //点击减少商品数量
                    if(target.className == 'sub'){
                        let id = target.dataset.id - 0
                        let goods = this.list.find(item=>{return item.goods_id == id})
                        //注意点：这个地方工作中跟进商品库存决定，不能固定现在主要是为了方便调试代码
                        if(goods.cart_number==1){
                            return false
                        }
                        goods.cart_number--
                        require(['jquery'],()=>{
                            $('header').load('/html/header.html',()=>{
                                require(['header'],(modA)=>{
                                  modA()
                                })
                              })
                        })
                        this.render()
                        this.total()
                    }
                    //点击删除商品数量
                    if(target.className == 'del'){
                        let id = target.dataset.id - 0
                        let index = this.list.findIndex(item=>{return item.goods_id == id})
                        this.list.splice(index, 1)
                        require(['jquery'],()=>{
                            $('header').load('/html/header.html',()=>{
                                require(['header'],(modA)=>{
                                  modA()
                                })
                              })
                        })
                        this.render()
                        this.total()
                        if(!this.list.length){
                            this.selectAll.checked = false
                        }
                    }
                    //点击清空购物车
                    if(target.className == 'dlAll'){
                        //遍历数组，进行过滤
                        let res = this.list.filter(item=>{
                            //把数据里面是没有选中状态的给过滤出来，剩余的就是选中的
                            return item.is_select == false
                        })
                        //重新赋值
                        this.list = res
                        require(['jquery'],()=>{
                            $('header').load('/html/header.html',()=>{
                                require(['header'],(modA)=>{
                                  modA()
                                })
                              })
                        })
                        this.render()
                        this.total()
                        if(!this.list.length){
                            this.selectAll.checked = false
                        }
                    }
                }
            }
            total(){
                let num = 0
                let price = 0
                this.list.forEach(item=>{
                    //总价和总的数量必须是选中状态下才计算
                    if(item.is_select == true){
                        num += item.cart_number
                        price += item.cart_number * item.price
                    }
                    let res = this.list.every(item=>{return item.is_select == true})
                    this.selectAll.checked = res
                })
                this.totalNum.innerHTML = num
                this.money.innerHTML = price
            }
        }
        new Cart()
    })
})